<template>
  <div>
    <!-- 
      三级选择器的禁用：显示SpuList时不禁用，显示其他禁用
     -->
    <CategorySelector :disabled="isShow !== 1" />
    <!-- 
      功能1.删除spu组件和spuList列表展示的切换
        子 -> 父 (自定义事件)
      功能2.添加按钮的禁用
         :disabled="!categoryStore.category3Id"
      功能3.在添加spu组件时，禁用三级分类选择器
        :disabled="!isShowSpuList"
     -->
    <!-- 
      两个组件切换用布尔值标识
      三个组件切换用1,2,3
        1,显示 SpuList
        2,显示 AddOrUpdateSpu 
        3,显示 AddSku 
      -->
    <SpuList v-if="isShow === 1" @setIsShow="setIsShow" />
    <AddOrUpdateSpu v-else-if="isShow === 2" @setIsShow="setIsShow" />
    <AddSku v-else @setIsShow="setIsShow" />
  </div>
</template>

<script lang="ts">
export default {
  name: "XSpu",
};
</script>

<script lang="ts" setup>
import CategorySelector from "@/components/CategorySelector/index.vue";
import AddOrUpdateSpu from "./components/AddOrUpdateSpu.vue";
import SpuList from "./components/SpuList.vue";
import AddSku from "./components/AddSku.vue";
import { ref } from "vue";
const isShow = ref(1);
// 显示删除Spu组件，显示SpuList列表组件
const setIsShow = (newVal: number) => {
  isShow.value = newVal;
};
</script>

<style scoped></style>
